<template>
  <j-modal
    switchFullscreen
    :title='title'
    :width='1200'
    :visible='visible'
    :maskClosable='false'
    :confirmLoading='confirmLoading'
    @ok='handleOk'
    @cancel='handleCancel'
    cancelText='关闭'>
    <template slot="footer">
      <a-button @click="handleCancel">取消</a-button>
      <a-button @click="handleOk" type="primary" v-if="!disableSubmit">确认</a-button>
    </template>
    <div class='info-line'style="color: black;font-weight:500">基础信息</div>
    <a-spin :spinning='confirmLoading'>
      <a-form :form='form'>
        <a-row :gutter='24'>
          <a-col :md='8' :sm='24'>
            <a-form-item label='申请人' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-input placeholder='请输入' disabled='true'  v-decorator="['productName']" />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='申请人职位'
              >
              <a-input placeholder='请输入' disabled='true'  v-decorator="['goodsCode']" />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='申请日期'
              >
              <a-input placeholder='请输入' :disabled='disableSubmit'  v-decorator="['goodsName',validatorRules.goodsName]" />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='请假类型'
            >
              <a-input placeholder='请输入' disabled='true'  v-decorator="['classifyName']" />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='开始时间'
              >
              <a-input placeholder='请输入' disabled='true'  v-decorator="['isSales']" />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='结束时间'
              >
              <a-input placeholder='请输入' disabled='true'  v-decorator="['hotSales']" />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='请假事由'
              >
              <a-input placeholder='请输入' disabled='true'  v-decorator="['basicUnit']" />
            </a-form-item>
          </a-col>

        </a-row>
      </a-form>
    </a-spin>

    <div class='info-line' style="color: black;font-weight:500;margin-bottom: 10px">审批流</div>
    <a-spin :spinning='confirmLoading'>
      <a-form :form='form'>
<!--        <a-col :md="12" :sm="24">-->
        <a-col :md='8' :sm='24'>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="审批人姓名"
          >
            <span class="ant-form-text">{{21662}}</span>
<!--            <a-input :disabled="disableSubmit" placeholder="请输入" v-decorator="['custName']"/>-->
          </a-form-item>
        </a-col>
        <a-col :md='8' :sm='24'>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label=""
          >
            <span>审批通过.....</span>
          </a-form-item>
        </a-col>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="意见"
          >
            <span >情况属实</span>
          </a-form-item>

      </a-form>
    </a-spin>
    <a-spin :spinning='confirmLoading'>
      <a-form :form='form'>
        <a-col :md='8' :sm='24'>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="审批人姓名"
          >
            <span class="ant-form-text">{{21662}}</span>
            <!--            <a-input :disabled="disableSubmit" placeholder="请输入" v-decorator="['custName']"/>-->
          </a-form-item>
        </a-col>
        <a-col :md='8' :sm='24'>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label=""
          >
            <span class="ant-form-text">审批通过.....</span>
          </a-form-item>
        </a-col>
        <a-col>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="意见"
          >
            <span>情况属实</span>
          </a-form-item>
        </a-col>
      </a-form>
    </a-spin>
    <a-spin :spinning='confirmLoading'>
      <a-form :form='form'>
        <!--        <a-col :md="12" :sm="24">-->
        <a-col :md='8' :sm='24'>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="审批人姓名"
          >
            <span class="ant-form-text">{{21662}}</span>
            <!--            <a-input :disabled="disableSubmit" placeholder="请输入" v-decorator="['custName']"/>-->
          </a-form-item>
        </a-col>
        <a-col :md='8' :sm='24'>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label=""
          >
            <span class="ant-form-text">审批通过.....</span>
          </a-form-item>
        </a-col>
        <a-col>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="意见"
          >
            <span class="ant-form-text">情况属实</span>
          </a-form-item>
        </a-col>
      </a-form>
    </a-spin>


    <proChose ref="prochoose" name="产品" v-bind='modalProps' @okbro="okbropro"></proChose>
    <proChose ref="prochoose1" name="商品分类" v-bind='modalProps1' @okbro="okbropro1"></proChose>
  </j-modal>
</template>

<script>
import proChose from '@comp/cn-components/ProChose'
import { getAction, httpAction, postAction } from '@/api/manage'
import { pick } from 'lodash'
import moment from 'moment'
import myShuttleModal from '@/components/cn-components/CnShuttleModal'
import JTreeSelect from '@/components/cn-form/JTreeSelect'
import JAreaLinkage from '@comp/cn-form/CnAreaLinkage'
import { isMobile, isPermit } from '@/utils/validate'
import UploadImage from '@/components/upload-image/UploadImage'
import JUpload from '@/components/cn-form/JUpload'
import Area from '@/components/utils/Area'

export default {
  name: 'userorgerlModal',
  data() {
    return {
      name: '',
      sendPro: false,
      remarks: '',
      dataSurces: [],
      // dataSurces3: [],
      manobjList: [0],
      areaData: '',
      productCode:'',
      areaLinkage: '',
      flbm:'',
      title: '操作',
      visible: false,
      isEdit:false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        productName: {
          rules: [
            { required: false, message: '' }
          ]
        },
        classifyName: {
          rules: [
            { required: false, message: '' }
          ]
        },
        goodsName: {
          rules: [
            { required: false, message: '' }
          ]
        },
        sort: {
          rules: [
            { required: false, message: '' }
          ]
        }
      },
      imgList:{
        type1:[],
        type2:[],
        type3:[],
        type4:[],
        type5:[],
        type6:[],
      },
      queryById: '/goods/cnGoods/getGoodsInfo',

      addOrUpdateUrl: window._CONFIG['domianURL'] + '/cnTerminalController/saveOrUpdateTerminal'
    }
  },
  components: { JTreeSelect, JAreaLinkage, UploadImage, JUpload,proChose,myShuttleModal },
  created() {

  },
  computed: {
    modalProps() {
      return {
        name: this.name
      }
    },
    modalProps1() {
      return {
        name: this.name
      }
    }

  },
  methods: {
    okbropro(val, status, status2) {
      let objs = JSON.parse(JSON.stringify(val[0]))
      console.log('产品信息',objs)
      this.form.setFieldsValue({
        productName:objs.productName,
        goodsCode:objs.productCode
      })
      this.model.productCode=objs.productCode
    },
    okbropro1(val, status, status2) {
      let objs = JSON.parse(JSON.stringify(val[0]))
      this.form.setFieldsValue({
        classifyName: objs.classifyName,

      })
      this.model.classifyCode=objs.classifyCode
    },
    add() {
      this.edit()
    },
    edit(isEdit) {
      this.visible = true
      this.form.resetFields()
      if(isEdit){

        postAction(this.queryById, { goodsCode: isEdit.goodsCode }).then((res) => {
          if (res.success) {
            let record = res.result
            this.model = Object.assign({}, record)
            this.model.rangePicker = [ this.model.startTime,this.model.endTime]
            this.model.newPicker=[this.model.newStartTime,this.model.newEndTime]
            this.model.isSales=record?record.isSales:1
            this.visible = true
            if(this.model.goodsFiles){
              this.model.goodsFiles.forEach((item,index)=>{
                item.uid=index
                item.status='done'
                if(item.platformType==1&&item.type==1){
                  this.imgList.type1.push(item)
                }else if(item.platformType==2&&item.type==1){
                  this.imgList.type2.push(item)
                } else if(item.platformType==1&&item.type==2){
                  this.imgList.type3.push(item)
                }else if(item.platformType==2&&item.type==2){
                  this.imgList.type4.push(item)
                }else if(item.platformType==1&&item.type==3){
                  this.imgList.type5.push(item)
                }else if(item.platformType==2&&item.type==3){
                  this.imgList.type6.push(item)
                }
              })
              // console.log(this.imgList)
            }
            let fieldsVal = pick(this.model,'productName','goodsCode','goodsName','classifyName','isSales','hotSales','basicUnit','custName');
            this.$nextTick(() => {

              this.form.setFieldsValue(fieldsVal);
            });
          }
        })
      }
    },
    handleCancel() {
      this.$emit('close')
      this.form.resetFields()
      this.isEdit=false
      this.imgList={
        type1:[],
        type2:[],
        type3:[],
        type4:[],
        type5:[],
        type6:[],
      }
      this.model={}
      this.visible = false
    },
    handleOk() {
      console.log(this.imgList)
      let that = this
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let formData = Object.assign(that.model, values)
          if(formData.rangePicker){
            formData.startTime = formData.rangePicker[0]
            formData.endTime = formData.rangePicker[1]
          }
          if(formData.newPicker){
            formData.newStartTime = formData.newPicker[0]
            formData.newEndTime = formData.newPicker[1]
          }

          // formData.productCode=this.productCode
          // formData.classifyCode=this.flbm
          formData.goodsFiles=[]
          for(let i in that.imgList){
            that.imgList[i].forEach(item=>{
              item.type=item.type?item.type:item.types
              delete item.status
              formData.goodsFiles.push(item)
            })

          }
          // console.log('数据',formData)
          postAction('/goods/cnGoods/saveOrUpdate', formData).then((res) => {
            if (res.success) {
              that.handleCancel()
              that.$message.success(res.message, 2)
              that.$emit('ok')

            } else {
              that.$message.error(res.message, 2)
            }
          }).finally(() => {
            that.confirmLoading = false
          })
        }
      })
    },
    pdDetailChange(e){
      this.model.detailPc=e[0].url
    },
    xptiem(e){
      this.$set(this.model,"isNew",e)
    },
    pdLogoChange1(e){
      console.log(e)
      this.imgList.type1=[]
      e.forEach(item=>{
        this.imgList.type1.push({platformType:1,types:1,url:item.url,name:item.name,uid:item.uid,status:'done'})
      })
    },
    pdLogoChange2(e){
      this.imgList.type2=[]
      e.forEach(item=>{
        this.imgList.type2.push({platformType:2,types:1,url:item.url,name:item.name,uid:item.uid,status:'done'})
      })
    },
    pdLogoChange3(e){
      console.log(e)
      this.imgList.type3=[]
      e.forEach(item=>{
        this.imgList.type3.push({platformType:1,types:2,url:item.url,name:item.name,uid:item.uid,status:'done'})
      })
    },
    pdLogoChange4(e){
      this.imgList.type4=[]
      e.forEach(item=>{
        this.imgList.type4.push({platformType:2,types:2,url:item.url,name:item.name,uid:item.uid,status:'done'})
      })
    },
    pdLogoChange5(e){
      this.imgList.type5=[]
      e.forEach(item=>{
        this.imgList.type5.push({platformType:1,types:3,url:item.url,name:item.name,uid:item.uid,status:'done'})
      })
    },
    pdLogoChange6(e){
      this.imgList.type6=[]
      e.forEach(item=>{
        this.imgList.type6.push({platformType:2,types:3,url:item.url,name:item.name,uid:item.uid,status:'done'})
      })
    },
    close() {
      // this.handleCancel()
    },
    productSearch(status) {
      this.$refs.prochoose.rowKey = 'id'
      let formconfig = [
        {
          key: 'productCode',
          label: '产品编号'
        },
        {
          key: 'productName',
          label: '产品名称'
        }
      ]
      let tableconfig = {
        columns: [
          {
            title: '产品编号',
            align: 'left',
            dataIndex: 'productCode',
            width: 120,
            ellipsis: true
          },
          {
            title: '产品名称',
            align: 'left',
            dataIndex: 'productName',
            width: 120,
            ellipsis: true
          }
        ],
        list: window._CONFIG['domianURL'] + '/products/cnProduct/findPageList',
        multiple: false,
        columW: 10
      }

      this.name = '用户'
      let dataSource = []
      if (this.form.getFieldValue('superiorUser')) {
        dataSource = [{
          productCode: this.form.getFieldValue('superiorUser'),
          productName: this.form.getFieldValue('realsname')
        }]
      }
      console.log(dataSource)
      this.$refs.prochoose.edit(formconfig, tableconfig, 'superiorUser', 'realsname', dataSource)
    },
    productSearch1(status) {
      this.$refs.prochoose1.rowKey = 'id'
      let formconfig = [
        {
          key: 'classifyCode',
          label: '分类编号'
        },
        {
          key: 'classifyName',
          label: '分类名称'
        }
      ]
      let tableconfig = {
        columns: [
          {
            title: '分类编号',
            align: 'left',
            dataIndex: 'classifyCode',
            width: 120,
            ellipsis: true
          },
          {
            title: '分类名称',
            align: 'left',
            dataIndex: 'classifyName',
            width: 120,
            ellipsis: true
          }
        ],
        list: window._CONFIG['domianURL'] + '/goodsclassify/cnGoodsClassify/findPageList',
        multiple: false,
        columW: 10
      }

      this.name = '用户'
      let dataSource = []
      if (this.form.getFieldValue('superiorUser')) {
        dataSource = [{
          userName: this.form.getFieldValue('superiorUser'),
          realName: this.form.getFieldValue('classifyCode')
        }]
      }
      console.log(dataSource)
      this.$refs.prochoose1.edit(formconfig, tableconfig, 'superiorUser', 'realsname', dataSource)
    },
  }
}
</script>

<style lang='less' scoped>
.info-line {
  display: flex;
  flex-direction: row;
}

.info-line:before {
  content: "";
  flex: 0.1;
  border-bottom: 1px solid #ebedee;
  margin: auto 4px;
}
.info-line:after {
  content: "";
  flex: 0.9;
  border-bottom: 2px solid #ebedee;
  margin: auto 4px;
}
</style>